import React from 'react';
import base from "../../../util/base";
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Flex, Picker, List, Switch } from 'weaver-mobile';
import { getLabel} from '../../../util/common';
import WfSelect from '../../../public/wf-form-select/index';
import {toJS} from "mobx";
import {_} from "../../../util/pcPublic";

@inject('wfRemindStore', 'wfSignInputStore')
@withRouter
@observer
export default class RemindType extends React.Component{
    
  
    setLable = () => {
      const { fowardSubmitParams={} } = this.props.wfSignInputStore;
      const {forwardflag = '1'} = fowardSubmitParams;
      if( forwardflag == '4') {
        return getLabel(391412,'接收人设置')
      } else if( forwardflag == '1') {
        return getLabel(81768, '接收人权限')
      }
    }
    
 
    render() {
        const { wfRemindStore,className="",viewOnly=false,isForward=false, isFromSignPanle=false,  wfSignInputStore } = this.props;
        const { remindInfo,remindTypeStore } = wfRemindStore;
       
        //转发、传阅等功能选项设置
        const { chuanyueWfStore = {}, zhuanfaWfStore = {}, fowardSubmitParams={}, moreSetting, isformBottomEditBtn=false,
                needRemindInfo, needRemindTypes, notNeedRemind} = wfSignInputStore;
        const { chuanyueChoice, zhuanfaChoice, isforwardrights=false,selectOptions} = toJS(moreSetting);
        const {forwardflag} = fowardSubmitParams;
        const selectOptionsNew = selectOptions.length > 0 && selectOptions.map(item=>{
          return {value:item.key, label:item.showname}
        });

        //来自表单的提醒
        const showRemindInfo = !_.isEmpty(remindInfo) && remindInfo.isShow === true; 
        let { viewAttr,options,submitType,forwardType } = remindInfo;
      
        let optionsNew = options.map(item=>{
            return {value:item.key, label:item.showname}
        });
      
        //来自转发、传阅等操作的提醒
        const operateRemindInfo = !_.isEmpty(needRemindInfo) && needRemindInfo.isShow === true;
        if(isFromSignPanle && !isformBottomEditBtn && (forwardflag=='1' || forwardflag == '4')) { 
          let { options=[] } = needRemindInfo;
           optionsNew = options.length !== 0 && options.map(item=>{
              return {value:item.key, label:item.showname}
          });
        }

        const viewAttrNew = viewOnly ? 1 : viewAttr;
        const remindType = isForward ? forwardType : submitType;

        return (
            [<React.Fragment>
               { ((showRemindInfo&&!notNeedRemind) || (!isformBottomEditBtn&&isFromSignPanle&&operateRemindInfo&&!notNeedRemind)) && <Flex className={`wf-remind-type ${className}`} justify="end">
                 <Flex.Item style={{flex:3}}>{getLabel(506917,"流程提醒")}</Flex.Item>
                 <Flex.Item style={{flex:7}}>
                     <WfSelect 
                         detailtype={2}
                         store={remindTypeStore}
                         viewAttr={viewAttrNew}
                         value={remindType}
                         options={optionsNew}
                         onChange={(value)=>{
                             wfRemindStore.changeRemindType(value, isForward);
                         }}
                     />
                 </Flex.Item>
               </Flex>
               }
            </React.Fragment>
             ,
            <React.Fragment>
              {(forwardflag == '1' && isforwardrights || forwardflag == '4' ) && isFromSignPanle && !isformBottomEditBtn && <Flex className={`wf-remind-type ${className}`} justify="end">
              <Flex.Item style={{flex:3}}>{this.setLable()}</Flex.Item>
              <Flex.Item style={{flex:7}}>
                  <WfSelect 
                      detailtype={2}
                      store={forwardflag == '4' ? chuanyueWfStore: zhuanfaWfStore}
                      viewAttr={2}
                      value={forwardflag == '4' ? chuanyueChoice: zhuanfaChoice}
                      options={selectOptionsNew}
                      onChange={(value)=>{
                        wfSignInputStore.changeChoices(value, forwardflag)
                      }}
                  />
              </Flex.Item>
            </Flex>}
          </React.Fragment>,
          <React.Fragment>
            {this.getEndTakOverTimeSetting()}
          </React.Fragment>
          ]
        )
    }


    //显示征询设置
    getEndTakOverTimeSetting() {
      const {wfSignInputStore, isFromSignPanle=false} = this.props;
      const wfOperateStore = base.wfOperateStore;
      const { markInfo = {} } = wfOperateStore;
      const {customBtnInfo = {}} = markInfo;
      const {fowardSubmitParams = {}, setForwardParams, inquiryVariate, setInquiryVariate, saveKeyValueTemporary} = wfSignInputStore;
      const { overTimeTakInfo = {} } = customBtnInfo;
      const {forwardflag = '1'} = fowardSubmitParams;
      const {isMulitTak,takOverHours = 0,takOverMins = 30, isOpenTakOvertime='0'} = inquiryVariate;
      let hourOptions = [];
      let minOptions = [];
      for(let i = 0; i <= 59; i++) {
        minOptions.push({
            label: i + getLabel(512647,"分钟"),
            value: i,
          });
      }
      for(let i = 0; i <= 23; i++) {
          hourOptions.push({
              label: i + getLabel(391, "小时"),
              value: i,
            });
      }
      const options = [hourOptions, minOptions];
      let com = <div className="sign-overtimetak">
          <List.Item
          extra={
          <Switch
              checked={isOpenTakOvertime == '1'}
              onClick={(checked) => { 
                let val = {isOpenTakOvertime : checked ? '1' : '0'};
                setInquiryVariate(val); 
                setForwardParams(val)
                saveKeyValueTemporary(val);
              }
              }
          />}
          >
              {overTimeTakInfo && overTimeTakInfo[1]}
          </List.Item>
          {
              isOpenTakOvertime == '1' && 
              <List.Item>
                  <div>{overTimeTakInfo && overTimeTakInfo[4]}</div>
                  <div className="sign-overtimetak-datepicker"> 
                      <Picker
                          data={options}
                          cascade={false}
                          value={[takOverHours, takOverMins]}
                          onChange={v => {
                            let val = { takOverHours: v[0], takOverMins: v[1] };
                            setInquiryVariate(val); 
                            setForwardParams(val)
                            saveKeyValueTemporary(val);
                          }}
                          format={(labels) => { return labels.join(''); }}
                      >
                          <List.Item arrow="horizontal"></List.Item>
                      </Picker>
                  </div>
              </List.Item>
          }
      </div>
      return (forwardflag == '2' && !isMulitTak && isFromSignPanle) ? com : null;
  }
}
